<script setup>
import { ref, reactive, onMounted } from "vue";
import axios from "@/request";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  Plus,
  Delete,
  CopyDocument,
  Search,
  Download,
} from "@element-plus/icons-vue";

const userAccount = ref();
const dialogFormVisible = ref(false);
const dialogVisible = ref(false);
const details = ref({});
const ruleFormRef = ref();
const total = ref(0);
const ruleForm = ref({
  name: "", // 车主姓名
  order: "", // 订单号
  carNumber: "", // 车牌号码
  sum: "", // 金额
  desc: "", // 备注
  items: [],
  items_1: "",
  itemsSum_1: "",
  items_2: "",
  itemsSum_2: "",
  items_3: "",
  itemsSum_3: "",
  items_4: "",
  itemsSum_4: "",
  itemsName_5: "",
  items_5: "",
  itemsSum_5: "",
  alipayImg: "", // 支付宝
  weChatPayImg: "", // 微信
  otherImg: "", // 其他
});
const validateAmount = (rule, value, callback) => {
  if (!value || !/\d+(\.\d{1,2})?/.test(value)) {
    callback(new Error("请输入合法的金额（最多两位小数）"));
  } else {
    callback();
  }
};
const rules = reactive({
  name: [{ required: true, message: "请输入车主姓名", trigger: "blur" }],
  carNumber: [{ required: true, message: "请输入车牌号", trigger: "blur" }],
  sum: [
    { required: true, message: "金额不能为空", trigger: "blur" },
    { min: 0, message: "金额不能小于0", trigger: "blur" },
    { validator: validateAmount, trigger: "blur" },
  ],
});
const tableData = ref([]);
const activeName = ref("alipay");
const pageSize = ref(30);
const pageNum = ref(1);
const pcMobile = ref(false);
const baseUrl = import.meta.env.VITE_BASE_URL;
const token = sessionStorage.getItem("token");
const searchForm = reactive({
  name: "",
  status: "",
  carNumber: "",
  date: "",
});


const submitForm = async (formEl) => {
  // 调用函数生成订单号
  const orderNumber = generateOrderNumber();
  ruleForm.value.order = orderNumber;
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (ruleForm.value._id) {
        editOrder();
      } else {
        axios
          .post(`/api/order`, ruleForm.value, {
            headers: {
              "Content-Type": "application/json",
            },
          })
          .then((res) => {
            const { status, data } = res;
            if (status === 200) {
              dialogFormVisible.value = false;
              searchOrders();
              ElMessage({
                message: "创建成功.",
                type: "success",
              });
            }
          })
          .catch((err) => {
            ElMessage({
              message: "创建失败.",
              type: "error",
            });
          });
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};

const resetForm = (formEl) => {
  if (!formEl) return;
  dialogFormVisible.value = false;
  formEl.resetFields();
};

// 查询订单列表
const searchOrders = () => {
  axios
    .get(
      `/api/order?pageNum=${pageNum.value}&pageSize=${pageSize.value}&name=${
        searchForm.name
      }&status=${searchForm.status}&carNumber=${
        searchForm.carNumber
      }&date=${searchForm.date.toString()}`
    )
    .then((result) => {
      const { status, data } = result;
      if (status === 200) {
        tableData.value = data.data;
        total.value = data.total;
      }
    })
    .catch((err) => {});
};
// 分页
const handleCurrentChange = (val) => {
  pageNum.value = val;
  searchOrders();
};
//
const openDialog = (data) => {
  dialogFormVisible.value = true;
  if (data) {
    ruleForm.value = data;
  } else {
    ruleForm.value = {
      name: "", // 车主姓名
      order: "", // 订单号
      carNumber: "", // 车牌号码
      sum: "", // 金额
      desc: "", // 备注
      items: [],
      items_1: "",
      itemsSum_1: "",
      items_2: "",
      itemsSum_2: "",
      items_3: "",
      itemsSum_3: "",
      items_4: "",
      itemsSum_4: "",
      itemsName_5: "",
      items_5: "",
      itemsSum_5: "",
      alipayImg: "", // 支付宝
      weChatPayImg: "", // 微信
      otherImg: "", // 其他
    };
  }
};
// 修改订单
const editOrder = () => {
  axios
    .put(`/api/order/${ruleForm.value._id}`, ruleForm.value)
    .then((result) => {
      const { status, data } = result;
      if (status === 200) {
        dialogFormVisible.value = false;
        searchOrders();
        ElMessage({
          message: "修改成功.",
          type: "success",
        });
      }
    })
    .catch((err) => {});
};

// 生成订单号
const generateOrderNumber = () => {
  const timestamp = Date.now(); // 获取当前时间戳（毫秒）
  const orderNumber = `${timestamp}`; // 拼接订单号前缀和时间戳
  return orderNumber;
};
// 详情
const openDetailsDialog = (data) => {
  dialogVisible.value = true;
  details.value = data;
  if (details.value.otherImg) {
    activeName.value = "other";
  } else if (details.value.alipayImg) {
    activeName.value = "alipay";
  } else if (details.value.weChatPayImg) {
    activeName.value = "weChat";
  } else {
    activeName.value = "signature";
    onChange("signature");
  }
};
// 时间过滤
const formatDate = (dateString) => {
  const date = new Date(dateString);
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, "0");
  const day = date.getDate().toString().padStart(2, "0");
  const hours = date.getHours().toString().padStart(2, "0");
  const minutes = date.getMinutes().toString().padStart(2, "0");
  const seconds = date.getSeconds().toString().padStart(2, "0");

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};
// 时间过滤
const formatDate_1 = (dateString) => {
  const date = new Date(dateString);
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, "0");
  const day = date.getDate().toString().padStart(2, "0");

  return `${year}-${month}-${day} 23:59:59`;
};

// 上传成功
const handleAvatarSuccess = (response, uploadFile) => {
  if (response.type === "alipay") {
    ruleForm.value.alipayImg = response.url; // 支付宝
  } else if (response.type === "weChat") {
    ruleForm.value.weChatPayImg = response.url; // 微信
  } else if (response.type === "other") {
    ruleForm.value.otherImg = response.url; // 其他
  }
};
// 图片删除
const handleRemove = (type) => {
  if (type === "alipay") {
    ruleForm.value.alipayImg = ""; // 支付宝
  } else if (type === "weChat") {
    ruleForm.value.weChatPayImg = ""; // 微信
  } else if (type === "other") {
    ruleForm.value.otherImg = ""; // 其他
  }
};
// 类型校验
const beforeAvatarUpload = (rawFile) => {
  if (rawFile.type.indexOf("image") == -1) {
    ElMessage.error("Avatar picture must be JPG format!");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error("Avatar picture size can not exceed 2MB!");
    return false;
  }
  return true;
};

// 搜索
const onSearch = () => {
  pageNum.value = 1;
  searchOrders();
};

// 确认收款
const confirmReceipt = (data) => {
  ElMessageBox.confirm("确认该订单已经付款了吗?", "警告", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    axios
      .put(`/api/order/payStatus/${data._id}`)
      .then((result) => {
        searchOrders();
      })
      .catch((err) => {});
  });
};
// 复制
const handleCopy = () => {
  const { host } = window.location;
  const payHref = `${host}/pay?id=${details.value._id}`;
  const input = document.createElement("textarea");
  input.value = payHref;
  document.body.appendChild(input);
  input.select();
  document.execCommand("copy");
  document.body.removeChild(input);
  return ElMessage.success("复制成功");
};

// 删除订单
const handleOrderRemove = (data) => {
  ElMessageBox.confirm("确定要删除该订单吗?", "警告", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    axios
      .delete(`/api/order/${data._id}`)
      .then((result) => {
        ElMessage({
          type: "success",
          message: "删除成功!",
        });
        searchOrders();
      })
      .catch((err) => {});
  });
};

const qrcodeUrl = ref();
const onChange = (val) => {
  if (val === "signature") {
    const { href } = window.location;
    const payHref = `${href}orderSignature?id=${details.value._id}`;
    axios
      .get(`/api/order/qrcode/qrcode?url=${payHref}`)
      .then((result) => {
        qrcodeUrl.value = result.data;
        console.log(payHref);
      })
      .catch((err) => {});
  }
};

searchOrders();
onMounted(() => {
  userAccount.value = sessionStorage.getItem("account");
  const screenWidth = window.screen.width;
  if (screenWidth >= 1024) {
    pcMobile.value = true;
  } else {
    pcMobile.value = false;
  }
});
</script>

<template>
  <div>
    <el-card class="common-layout">
      <!-- <el-button @click="openPay">支付</el-button> -->
      <el-row :gutter="20" style="margin-bottom: 20px">
        <el-col :span="18">
          <el-form ref="form" inline>
            <el-form-item>
              <el-input
                placeholder="请输入车主姓名"
                v-model.trim="searchForm.name"
                clearable
                maxlength="32"
              />
            </el-form-item>
            <el-form-item>
              <el-input
                placeholder="请输入车牌号"
                v-model.trim="searchForm.carNumber"
                clearable
                maxlength="32"
              />
            </el-form-item>
            <!-- <el-form-item>
              <el-input
                placeholder="请输入订单号"
                v-model="searchForm.order"
                clearable
                maxlength="32"
              />
            </el-form-item> -->
            <el-form-item>
              <el-select
                v-model="searchForm.status"
                placeholder="请选择支付状态"
                clearable
                @change="onSearch"
                style="width: 150px;"
              >
                <el-option label="已支付" value="1"></el-option>
                <el-option label="未支付" value="-1"></el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item>
              <el-date-picker
                style="width: 300px"
                v-model="searchForm.date"
                placeholder="请选择日期"
                type="daterange"
                range-separator="-"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                value-format="YYYY-MM-DD"
              />
            </el-form-item> -->
            <el-form-item>
              <el-button type="primary" @click="onSearch">
                <el-icon><Search /></el-icon>
                <span style="margin-left: 5px">搜索</span>
              </el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6" style="text-align: right">
          <!-- <el-button @click="openDialog()">
            <el-icon><Download /></el-icon>
            <span style="margin-left: 5px">批量下载</span></el-button
          > -->
          <el-button type="primary" @click="openDialog()"
            ><el-icon><Plus /></el-icon
            ><span style="margin-left: 5px">创建订单</span></el-button
          >
        </el-col>
      </el-row>
      <el-table
        size="small"
        :data="tableData"
        border
        style="width: 100%"
        height="75vh"
      >
        <!-- <el-table-column type="selection" width="55" align="center" /> -->
        <el-table-column label="序号" type="index" align="center" width="55"></el-table-column>
        <el-table-column prop="name" label="车主姓名"></el-table-column>
        <el-table-column prop="carNumber" label="车牌号码"></el-table-column>
        <el-table-column prop="sum" label="金额">
          <template #default="scope">
            <el-text type="danger">
              {{ scope.row.sum }}
            </el-text>
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="时间" width="150">
          <template #default="scope">
            {{ formatDate(scope.row.createdAt) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="order"
          label="单号"
          width="180"
        ></el-table-column>
        <el-table-column prop="payStatus" label="状态">
          <template #default="scope">
            <el-text v-if="scope.row.payStatus === -1" type="danger">
              未支付
            </el-text>
            <el-text v-else-if="scope.row.payStatus === 1" type="success">
              已支付
            </el-text>
            <el-text v-else-if="scope.row.payStatus === 0" type="success">
              支付中
            </el-text>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="230">
          <template #default="scope">
            <el-button
              link
              size="small"
              type="primary"
              @click="openDialog(scope.row)"
              >修改</el-button
            >
            <el-button
              link
              size="small"
              type="success"
              @click="openDetailsDialog(scope.row)"
              >查看</el-button
            >
            <el-button link size="small"
              ><RouterLink :to="`/about?id=${scope.row._id}`"
                >合同</RouterLink
              ></el-button
            >
            <el-button
              v-if="scope.row.payStatus === -1"
              link
              size="small"
              type="warning"
              @click="confirmReceipt(scope.row)"
              >收款</el-button
            >
            <el-button
              v-if="userAccount === 'root'"
              link
              size="small"
              type="danger"
              @click="handleOrderRemove(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div style="padding: 20px; display: flex; justify-content: center">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
          :current-page="pageNum"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
    </el-card>
    <el-drawer
      v-model="dialogFormVisible"
      title="创建订单"
      direction="rtl"
      :size="pcMobile ? '50%' : '90%'"
      :show-close="false"
    >
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        class="demo-ruleForm"
        label-position="top"
        status-icon
      >
        <el-form-item label="服务单号: " prop="order">
          <el-input v-model="ruleForm.order" disabled></el-input>
        </el-form-item>
        <el-form-item label="车主姓名: " prop="name">
          <el-input v-model.trim="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="车牌号码: " prop="carNumber">
          <el-input v-model.trim="ruleForm.carNumber"></el-input>
        </el-form-item>
        <el-form-item label="支付金额: " prop="sum">
          <el-input v-model.trim="ruleForm.sum" type="number" step="0.01"></el-input>
        </el-form-item>
        <!-- <el-form-item label="服务项目" prop="desc">
                      <el-input v-model="ruleForm.desc" type="textarea" />
                  </el-form-item> -->
        <el-form-item label="机动车车损损失: " prop="items_1">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-input
                v-model.trim="ruleForm.items_1"
                placeholder="金额"
              ></el-input>
            </el-col>
            <el-col :span="8">
              <el-input
                v-model.trim="ruleForm.itemsSum_1"
                placeholder="额度"
              ></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="机动车第三者责任: " prop="items_2">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-input
                v-model.trim="ruleForm.items_2"
                placeholder="金额"
              ></el-input>
            </el-col>
            <el-col :span="8">
              <el-input
                v-model.trim="ruleForm.itemsSum_2"
                placeholder="额度"
              ></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="机动车车上人员-司机: " prop="items_3">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-input
                v-model.trim="ruleForm.items_3"
                placeholder="金额"
              ></el-input>
            </el-col>
            <el-col :span="8">
              <el-input
                v-model.trim="ruleForm.itemsSum_3"
                placeholder="额度"
              ></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="机动车车上人员-乘客: " prop="items_4">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-input
                v-model.trim="ruleForm.items_4"
                placeholder="金额"
              ></el-input>
            </el-col>
            <el-col :span="8">
              <el-input
                v-model.trim="ruleForm.itemsSum_4"
                placeholder="额度"
              ></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="其他: " prop="items_5">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-input
                v-model="ruleForm.itemsName_5"
                placeholder="服务名称"
              ></el-input>
            </el-col>
            <el-col :span="8">
              <el-input
                v-model.trim="ruleForm.items_5"
                placeholder="金额"
              ></el-input>
            </el-col>
            <el-col :span="8">
              <el-input
                v-model.trim="ruleForm.itemsSum_5"
                placeholder="额度"
              ></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="支付宝: ">
              <el-upload
                class="avatar-uploader"
                :action="`${baseUrl}/api/flie/upload?type=alipay`"
                :show-file-list="false"
                accept="image/*"
                list-type="picture-card"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                :headers="{ authorization: token }"
              >
                <div
                  v-if="ruleForm.alipayImg"
                  style="
                    width: 100%;
                    height: 100%;
                    border-radius: 5px;
                    overflow: hidden;
                    position: relative;
                  "
                >
                  <img
                    :src="baseUrl + '/' + ruleForm.alipayImg"
                    class="avatar"
                  />
                  <el-button
                    link
                    type="danger"
                    style="
                      position: absolute;
                      position: absolute;
                      top: 2px;
                      right: 2px;
                      z-index: 9;
                    "
                    @click.stop="handleRemove('alipay')"
                  >
                    <el-icon>
                      <Delete></Delete>
                    </el-icon>
                  </el-button>
                </div>
                <el-icon v-else class="avatar-uploader-icon">
                  <Plus></Plus>
                </el-icon>
                <template #tip>
                  <div class="el-upload__tip">
                    只能上传jpg/png文件，且不超过500kb
                  </div>
                </template>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="微信: ">
              <el-upload
                class="avatar-uploader"
                :action="`${baseUrl}/api/flie/upload?type=weChat`"
                :show-file-list="false"
                list-type="picture-card"
                accept="image/*"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                :headers="{ authorization: token }"
              >
                <div
                  v-if="ruleForm.weChatPayImg"
                  style="
                    width: 100%;
                    height: 100%;
                    border-radius: 5px;
                    overflow: hidden;
                    position: relative;
                  "
                >
                  <img
                    :src="baseUrl + '/' + ruleForm.weChatPayImg"
                    class="avatar"
                  />
                  <el-button
                    link
                    type="danger"
                    style="position: absolute; top: 2px; right: 2px; z-index: 9"
                    @click.stop="handleRemove('weChat')"
                  >
                    <el-icon>
                      <Delete></Delete>
                    </el-icon>
                  </el-button>
                </div>
                <el-icon v-else class="avatar-uploader-icon">
                  <Plus></Plus>
                </el-icon>
                <template #tip>
                  <div class="el-upload__tip">
                    只能上传jpg/png文件，且不超过500kb
                  </div>
                </template>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="其他: ">
              <el-upload
                class="avatar-uploader"
                :action="`${baseUrl}/api/flie/upload?type=other`"
                :show-file-list="false"
                list-type="picture-card"
                accept="image/*"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                :headers="{ authorization: token }"
              >
                <div
                  v-if="ruleForm.otherImg"
                  style="
                    width: 100%;
                    height: 100%;
                    border-radius: 5px;
                    overflow: hidden;
                    position: relative;
                  "
                >
                  <img
                    :src="baseUrl + '/' + ruleForm.otherImg"
                    class="avatar"
                  />
                  <el-button
                    link
                    type="danger"
                    style="position: absolute; top: 2px; right: 2px; z-index: 9"
                    @click.stop="handleRemove('other')"
                  >
                    <el-icon>
                      <Delete></Delete>
                    </el-icon>
                  </el-button>
                </div>
                <el-icon v-else class="avatar-uploader-icon">
                  <Plus></Plus>
                </el-icon>
                <template #tip>
                  <div class="el-upload__tip">
                    只能上传jpg/png文件，且不超过500kb
                  </div>
                </template>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注: " prop="desc">
          <el-input
            v-model="ruleForm.desc"
            maxlength="100"
            type="textarea"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="submitForm(ruleFormRef)">
            确 认
          </el-button>
          <el-button @click="resetForm(ruleFormRef)">取 消</el-button>
        </span>
      </template>
    </el-drawer>
    <el-dialog
      v-model="dialogVisible"
      title="订单详情"
      :width="pcMobile ? '50%' : '100%'"
      :fullscreen="pcMobile ? false : true"
    >
      <div class="order_details">
        <div class="info">
          <p>
            服务单号: <span style="color: #409eff">{{ details.order }}</span>
          </p>
          <p>
            车牌号码:
            <span style="color: #409eff">{{ details.carNumber }}</span>
          </p>
          <p>
            车主姓名: <span style="color: #409eff">{{ details.name }}</span>
          </p>
        </div>
        <div class="items">
          <p class="items_header">服务项目</p>
          <el-row :gutter="20" class="items_row">
            <el-col :span="18">
              <el-row :gutter="20">
                <el-col
                  :span="8"
                  style="margin-bottom: 20px"
                  v-if="details.itemsSum_1"
                >
                  <div class="grid-content bg-purple">机动车车损损失</div>
                  <div>{{ details.items_1 }}</div>
                  <div style="color: #409eff">
                    额度: {{ details.itemsSum_1 }}
                  </div>
                </el-col>
                <el-col
                  :span="8"
                  style="margin-bottom: 20px"
                  v-if="details.itemsSum_2"
                >
                  <div class="grid-content bg-purple">机动车第三者责任</div>
                  <div>{{ details.items_2 }}</div>
                  <div style="color: #409eff">
                    额度:{{ details.itemsSum_2 }}
                  </div>
                </el-col>
                <el-col
                  :span="8"
                  style="margin-bottom: 20px"
                  v-if="details.itemsSum_3"
                >
                  <div class="grid-content bg-purple">机动车车上人员-司机</div>
                  <div>{{ details.items_3 }}</div>
                  <div style="color: #409eff">
                    额度:{{ details.itemsSum_3 }}
                  </div>
                </el-col>
                <el-col
                  :span="8"
                  style="margin-bottom: 20px"
                  v-if="details.itemsSum_4"
                >
                  <div class="grid-content bg-purple">机动车车上人员-乘客</div>
                  <div>{{ details.items_4 }}</div>
                  <div style="color: #409eff">
                    额度:{{ details.itemsSum_4 }}
                  </div>
                </el-col>
                <el-col
                  v-if="details.itemsName_5"
                  :span="8"
                  style="margin-bottom: 20px"
                >
                  <div class="grid-content bg-purple">
                    {{ details.itemsName_5 }}
                  </div>
                  <div>{{ details.items_5 }}</div>
                  <div style="color: #409eff">
                    额度:{{ details.itemsSum_5 }}
                  </div>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="6">
              <el-tabs
                v-model="activeName"
                @tab-change="onChange"
                class="demo-tabs"
              >
                <el-tab-pane
                  v-if="details.alipayImg"
                  label="支付宝"
                  name="alipay"
                >
                  <img :src="baseUrl + '/' + details.alipayImg" alt="" />
                </el-tab-pane>
                <el-tab-pane
                  v-if="details.weChatPayImg"
                  label="微信"
                  name="weChat"
                >
                  <img :src="baseUrl + '/' + details.weChatPayImg" alt="" />
                </el-tab-pane>
                <el-tab-pane v-if="details.otherImg" label="其他" name="other">
                  <img :src="baseUrl + '/' + details.otherImg" alt="" />
                </el-tab-pane>
                <el-tab-pane label="签名" name="signature">
                  <img :src="qrcodeUrl" alt="" />
                </el-tab-pane>
              </el-tabs>
            </el-col>
          </el-row>
          <div class="sum">
            合计支付:
            <span style="color: #f56c6c; font-size: 18px; font-weight: bold"
              >￥{{ details.sum }}</span
            >
          </div>
        </div>
        <div class="tips">
          <el-button size="small" text type="primary" @click="handleCopy"
            ><el-icon><CopyDocument /></el-icon
          ></el-button>
          请在
          <span style="color: #f56c6c">{{
            formatDate_1(details.createdAt)
          }}</span
          >前进行扫码支付
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped>
.common-layout {
  width: 100%;
  height: 100%;
}

.el-menu-vertical-demo {
  height: 100vh;
}

.info {
  font-size: 16px;
  margin-bottom: 10px;
  color: #111;
}

.items {
  background-color: #f9f9f9;
}

.items_header {
  background-color: #409eff;
  color: #fff;
  padding: 10px;
}

.items_row {
  padding: 10px;
}

.sum {
  padding: 10px;
  border-top: 1px solid #ccc;
}

.tips {
  padding: 20px;
  text-align: center;
}

.demo-tabs img {
  height: 180px;
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.avatar {
  width: 100%;
  height: 100%;
}
.el-upload__tip {
  font-size: 12px;
  color: #ccc;
  line-height: 20px;
}
:deep(.el-drawer__header) {
  border-bottom: 1px solid #ccc;
  margin: 0;
  padding: 15px;
}
:deep(.el-drawer__title) {
  font-weight: bold;
}
:deep(.el-form--inline .el-form-item) {
  margin-right: 10px;
}
/* 为小屏幕设备应用样式 */
@media only screen and (max-width: 600px) {
  :deep(.el-upload--picture-card) {
    --el-upload-picture-card-size: 100px;
  }
  :deep(.el-main) {
    padding: 20px 0;
  }
  .items_row {
    flex-direction: column;
  }
  :deep(.el-col-18) {
    max-width: 100%;
  }
  :deep(.el-col-6) {
    max-width: 100%;
  }
  :deep(.el-dialog__body) {
    padding: 10px;
  }
  :deep(.el-tab-pane) {
    width: 50%;
  }
}
</style>